<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<script type="text/javascript" src="../header.js"></script>
		<script type="text/javascript" src="../redips-drag-min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<title>Example 14: Sort elements in long table</title>
	</head>
	<body>
		<!-- tables inside this DIV could have draggable content -->
		<div id="drag">
			<!-- "shift" drop option with animation checkbox -->
			<input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="shift" title="Shift table content" checked="true"/> Shift
			(<input type="checkbox" class="checkbox" onclick="toggle_animation(this)" title="Enable / disable animation" checked=""/>with animation)
			<br/>
			<!-- "switching" drop option -->
			<input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="switching" title="Switching content continuously"/> Switching
			<!-- table -->
			<table id="table1">
				<colgroup>
					<col width="200"/>
				</colgroup>
				<tbody>
					<tr><td><div class="drag orange">11</div></td></tr><tr><td><div class="drag green">12</div></td></tr>
					<tr><td><div class="drag orange">15</div></td></tr><tr><td><div class="drag green">16</div></td></tr>
					<tr><td><div class="drag orange">27</div></td></tr><tr><td><div class="drag green">28</div></td></tr>
					<tr><td><div class="drag orange">9</div></td></tr><tr><td><div class="drag green">10</div></td></tr>
					<tr><td><div class="drag orange">3</div></td></tr><tr><td><div class="drag green">4</div></td></tr>
					<tr><td><div class="drag orange">5</div></td></tr><tr><td><div class="drag green">6</div></td></tr>
					<tr><td><div class="drag orange">17</div></td></tr><tr><td><div class="drag green">18</div></td></tr>
					<tr><td><div class="drag orange">29</div></td></tr><tr><td><div class="drag green">30</div></td></tr>
					<tr><td><div class="drag orange">7</div></td></tr><tr><td><div class="drag green">8</div></td></tr>
					<tr><td><div class="drag orange">13</div></td></tr><tr><td><div class="drag green">14</div></td></tr>
					<tr><td><div class="drag orange">23</div></td></tr><tr><td><div class="drag green">24</div></td></tr>
					<tr><td><div class="drag orange">1</div></td></tr><tr><td><div class="drag green">2</div></td></tr>
					<tr><td><div class="drag orange">25</div></td></tr><tr><td><div class="drag green">26</div></td></tr>
					<tr><td><div class="drag orange">19</div></td></tr><tr><td><div class="drag green">20</div></td></tr>
					<tr><td><div class="drag orange">21</div></td></tr><tr><td><div class="drag green">22</div></td></tr>
				</tbody>
			</table>
		</div>
	</body>
</html>